<template>
  <div class="main">
    <div class="form-container">
      <div class="form-main">
        <div class="enter_title">
          <h2 style="background:#265eff;">医院通-人员上报</h2>
        </div>
        <div class="enter_big">
          <div style="margin-top: 12px;">
            <span class="required" style="color:red">*</span>
            <label for="name">所在城市</label><br />
            <input
              class="form-border"
              id="currentProvince"
              readonly
              @click="showSelectPopup = true"
              type="text"
              name="currentProvince"
              placeholder="请选择所在城市"
              v-model="currentCity"
            />
            <br />
          </div>
          <div style="position: relative;">
            <span class="required" style="color:red">*</span>
            <label for="name">医院</label><br />
            <input
              class="form-border"
              id="hospitalModel"
              type="text"
              maxlength="10"
              placeholder="请选择医院"
              v-model="hospitalModelStr"
              readonly="readonly"
            />
            <br />
            <div
              style="position: absolute;right: 10px;top: 32px;"
              @click="showPopupPicker = true"
            >
              ···
            </div>
            <popup-picker
              style="display: none;"
              :data="hospitalList"
              :columns="3"
              ref="hospital"
              v-model="hospitalModel"
              @on-change="onChange"
              :show.sync="showPopupPicker"
              :show-cell="false"
            ></popup-picker>
          </div>

          <div>
            <span class="required" style="color:red">*</span>
            <label for="name">联系人</label><br />

            <input
              class="form-border"
              i
              type="text"
              maxlength="20"
              placeholder="请填写联系人"
              v-model="contactPerson"
            />
            <br />
          </div>
          <div>
            <span class="required" style="color:red">*</span>
            <label for="name">职务</label><br />

            <input
              class="form-border"
              i
              type="text"
              maxlength="32"
              placeholder="请填写职务"
              v-model="contactDuty"
            />
            <br />
          </div>
          <div>
            <span class="required" style="color:red">*</span>
            <label for="name">联系电话</label><br />

            <input
              class="form-border"
              type="text"
              maxlength="12"
              placeholder="请填写联系电话"
              v-model.number="contactPhone"
            />
            <br />
          </div>
          <div>
            <span class="required" style="color:red">*</span>
            <label for="name">座机</label><br />
            <input
              class="form-border"
              type="text"
              maxlength="12"
              placeholder="请填写座机"
              v-model.number="contactTelephone"
            />
            <br />
          </div>

          <div>
            <span class="required" style="color:red">*</span>
            <label for="name">在岗医生数</label><br />
            <input
              class="form-border"
              type="number"
              maxlength="10"
              placeholder="请填写在岗医生数量"
              v-model="dutyDoctor"
            />
            <br />
          </div>
          <div>
            <span class="required" style="color:red">*</span>
            <label for="name">在岗护士数</label><br />
            <input
              class="form-border"
              type="number"
              maxlength="10"
              placeholder="请填写在岗护士数量"
              v-model="dutyNurse"
            />
            <br />
          </div>
          <div>
            <span class="required" style="color:red">*</span>
            <label for="name">外来在岗医生数</label><br />
            <input
              class="form-border"
              type="number"
              maxlength="10"
              placeholder="请填写外来在岗医生数量"
              v-model="externalDocter"
            />
            <br />
          </div>
          <div>
            <span class="required" style="color:red">*</span>
            <label for="name">外来在岗护士数</label><br />
            <input
              class="form-border"
              type="number"
              maxlength="10"
              placeholder="请填写外来在岗护士数量"
              v-model="externalNurse"
            />
            <br />
          </div>

          <x-button type="default" @click.native="submitForm"
            >提交表单</x-button
          >
          <popup-picker
            :data="materialArr"
            v-model="materialModel"
            @on-change="onChangem"
            :show.sync="showPopupPickerm"
            :show-cell="false"
          ></popup-picker>
        </div>
      </div>
    </div>
    <datetime
      style="display:none;"
      v-model="queryTime"
      @on-change="changeTime"
      :show.sync="timeShow"
    ></datetime>
    <popup
      v-model="showSelectPopup"
      @on-hide="popupChange('hide')"
      @on-show="popupChange('show')"
      height="50%"
    >
      <menuLinkage
        :queryObj="casList"
        @setCityObj="setCityObj"
        ref="menuLinkage"
      />
    </popup>
    <!-- <popup-picker :showCell="false" title="测试" :show.sync="showPopupPicker" :data="casList" :columns="3" v-model="casModel" ></popup-picker> -->
  </div>
</template>
<script>
import {
  newquestionnaireData,
  queryCityDataForTwo,
  queryHospitalForDistict,
  queryMaterial,
  needStaffSubmit
} from "@/assets/js/service";
import { Confirm, Datetime, PopupPicker, Popup, XButton } from "vux";
import menuLinkage from "../commons/menuLinkage.vue";

export default {
  components: {
    Confirm,
    Datetime,
    PopupPicker,
    Popup,
    menuLinkage,
    XButton
  },
  data() {
    return {
      casList: [],
      casModel: [],
      hospitalModel: [],
      hospitalModelStr: "",
      hospitalList: [],
      openSimple: false,
      contactPerson: "", //联系人
      contactPhone: "", //联系电话
      contactTelephone: "", //联系人座机
      contactDuty: "", //职务
      dutyDoctor: "",
      dutyNurse: "",
      externalDocter: "",
      externalNurse: "",

      materialList: [{ name: "", num: "", note: "" }],
      materialModel: [],
      currmaterial: 0,
      materialArr: [],
      showPopupPickerm: false,
      showPopupPicker: false,
      districCode: "420100", //行政区划code
      timeShow: false,
      showSelectPopup: false,
      temperatureModel: "",
      feverModel: "1",
      contactModel: "1",
      showconfirm: false,
      confirmtitle: "是否继续填写",
      // 新增
      queryTime: "开始时间",
      currentProvince: "", //当前所在省
      currentCity: "湖北省 武汉市", //当前所在市
      currentCounty: "", //当前所在区/县
      currentCountry: "", //街道/乡/镇（当前所在地）
      currentVillage: "", //社区/村（当前所在地）
      currentLocation: "" //当前所在地（详细住址)
    };
  },
  created() {
    this.initcascade();
  },
  mounted: function() {
    let personMsg = localStorage.getItem("personMsg");
    this.endTime = this.getCurrentDate();
  },
  watch: {
    ageModel() {},
    dutyDoctor() {
      if (this.dutyDoctor.length > 10) {
        window.vm.$vux.toast.text("长度超出限制");
        this.dutyDoctor = this.dutyDoctor.slice(0, 10);
      } else if (this.FnContainSpecial(this.dutyDoctor) != true) {
        this.dutyDoctor = "";
        window.vm.$vux.toast.text("数量不能为负数、小数或长度超出限制");
      }
    },
    dutyNurse() {
      if (this.dutyNurse.length > 10) {
        window.vm.$vux.toast.text("长度超出限制");
        this.dutyNurse = this.dutyNurse.slice(0, 10);
      } else if (this.FnContainSpecial(this.dutyNurse) != true) {
        this.dutyNurse = "";
        window.vm.$vux.toast.text("数量不能为负数、小数或长度超出限制");
      }
    },
    externalDocter() {
      if (this.externalDocter.length > 10) {
        window.vm.$vux.toast.text("长度超出限制");
        this.externalDocter = this.externalDocter.slice(0, 10);
      } else if (this.FnContainSpecial(this.externalDocter) != true) {
        this.externalDocter = "";
        window.vm.$vux.toast.text("数量不能为负数、小数或长度超出限制");
      }
    },
    externalNurse() {
      if (this.externalNurse.length > 10) {
        window.vm.$vux.toast.text("长度超出限制");
        this.externalNurse = this.externalNurse.slice(0, 10);
      } else if (this.FnContainSpecial(this.externalNurse) != true) {
        this.externalNurse = "";
        window.vm.$vux.toast.text("数量不能为负数、小数或长度超出限制");
      }
    }
  },
  methods: {
    // 陈宇 20200212 补充  判断字符串是否包含小数点
    FnContainSpecial(s) {
      {
        const containSpecial = RegExp(/^\+?[1-9][0-9]*$/);

        return containSpecial.test(s);
      }
    },
    onChange(val) {
      console.log("val change", val);
      this.hospitalModelStr = this.$refs.hospital.getNameValues();
    },
    onChangem(val) {
      console.log("val change", val);
      this.materialList[this.currmaterial].name = val[0];
    },
    addOther() {
      console.log("添加其它物资");
      console.log(this.materialList);
      let obj = { name: "", num: "", note: "" };
      this.materialList.push(obj);
    },
    submitForm() {
      console.log("提交表单");
      let _this = this;
      let hospitalId = "";
      if (_this.hospitalModel.length > 0) {
        hospitalId = _this.hospitalModel[0];
      }
      let param = {
        hospitalId: hospitalId,
        hospitalName: _this.hospitalModelStr,
        districCode: _this.districCode,
        contactPerson: _this.contactPerson,
        contactPhone: _this.contactPhone,
        contactTelephone: _this.contactTelephone,
        contactDuty: _this.contactDuty,
        dutyDoctor: _this.dutyDoctor,
        dutyNurse: _this.dutyNurse,
        externalDocter: _this.externalDocter,
        externalNurse: _this.externalNurse
      };
      console.log(param);
      if (
        _this.$verification(_this.hospitalModelStr, 0, "医院") &&
        _this.$verification(_this.contactPerson, 0, "联系人") &&
        _this.$verification(_this.contactDuty, 0, "职务") &&
        _this.$verification(_this.contactPhone, 12, "联系电话") &&
        _this.$verification(_this.contactTelephone, 1, "座机") &&
        _this.$verification(_this.dutyDoctor, 0, "在岗医生数") &&
        _this.$verification(_this.dutyNurse, 0, "在岗护士数") &&
        _this.$verification(_this.externalDocter, 0, "外来在岗医生数") &&
        _this.$verification(_this.externalNurse, 0, "外来在岗护士数")
      ) {
        if (
          _this.$verification(_this.dutyDoctor, 2, "在岗医生数") &&
          _this.$verification(_this.dutyNurse, 2, "在岗护士数") &&
          _this.$verification(_this.externalDocter, 2, "外来在岗医生数") &&
          _this.$verification(_this.externalNurse, 2, "外来在岗护士数")
        ) {
          needStaffSubmit(param, function(res) {
            console.log("submit===>", res);
            if (res && res.success) {
              _this.$showBottomToast("上报成功");
              localStorage.setItem("needStaff", JSON.stringify(param));
              _this.$router.push({ path: '/reportSuccess' , query: {'name': _this.hospitalModelStr,'phone': _this.contactPhone}})
            } else {
              _this.$showBottomToast(JSON.stringify(res));
            }
          });
        }
      }
    },
    selectMateria(_index) {
      console.log("open materia==>" + _index);
      this.currmaterial = _index;
      this.showPopupPickerm = true;
    },
    setCityObj(_list) {
      console.log(_list);
      if (typeof _list[0] != "undefined" && typeof _list[1] != "undefined") {
        this.currentCity = _list[0].name + " " + _list[1].name;
        this.districCode = _list[1].code;
        this.initHospital();
      } else {
        this.currentCity = "";
      }
      this.showSelectPopup = false;
    },
    initHospital() {
      let _this = this;
      queryHospitalForDistict({ code: this.districCode }, function(res) {
        //console.log("res queryHospitalForDistict==>",res)
        if (typeof res.data != "undefined" && res.data.length > 0) {
          _this.hospitalList = [];
          res.data.forEach((item, index) => {
            let obj = { name: item.orgname, value: item.id, parent: 0 };
            _this.hospitalList.push(obj);
          });
          //console.log(_this.hospitalList);
        }
      });
    },
    initcascade() {
      let _this = this;
      //初始化行政区划
      queryCityDataForTwo({}, function(res) {
        console.log("res==>", res);
        _this.casList = [];
        if (typeof res.data != "undefined" && res.data.length > 0) {
          _this.casList = res.data;
          _this.$refs.menuLinkage.initData(_this.casList);
          _this.$refs.menuLinkage.setDefault(["湖北省", "武汉市"]);
        }
      });
      //初始化武汉医院
      _this.initHospital();
      let needStaff = localStorage.getItem("needStaff");
      if (needStaff) {
        let mobj = JSON.parse(needStaff);
        console.log("cache==>", mobj);
        _this.districCode = mobj.districCode;
        let hospitalModel = [];
        hospitalModel.push(mobj.hospitalId);
        _this.hospitalModel = hospitalModel;
        _this.hospitalModelStr = mobj.hospitalName;
        _this.contactPerson = mobj.contactPerson;
        _this.contactDuty = mobj.contactDuty;
        _this.contactPhone = mobj.contactPhone;
        _this.contactTelephone = mobj.contactTelephone;
        _this.dutyDoctor = mobj.dutyDoctor;
        _this.dutyNurse = mobj.dutyNurse;
        _this.externalDocter = mobj.externalDocter;
        _this.externalNurse = mobj.externalNurse;
      }
    },
    popupChange(_type) {
      console.log("_type==>" + _type);
    },
    showTimePlugin() {
      this.timeShow = true;
    },
    clearTree() {},
    changeTime() {
      console.log("change time");
      const cqueryTime = Date.parse(this.queryTime);
      const cendTime = Date.parse(this.endTime);
      // if(cqueryTime > cendTime){
      //     this.queryTime = "开始时间";
      //     window.vm.$vux.toast.text('请重新填写开始时间', 'bottom')
      // }
    },
    getCurrentDate() {
      const timeStr = "-";
      const curDate = new Date();
      const curYear = curDate.getFullYear(); //获取完整的年份(4位,1970-????)
      const curMonth = curDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      const curDay = curDate.getDate(); //获取当前日(1-31)
      const curWeekDay = curDate.getDay(); //获取当前星期X(0-6,0代表星期天)
      const curHour = curDate.getHours(); //获取当前小时数(0-23)
      const curMinute = curDate.getMinutes(); // 获取当前分钟数(0-59)
      const curSec = curDate.getSeconds(); //获取当前秒数(0-59)
      const Current = curYear + timeStr + curMonth + timeStr + curDay;
      return Current;
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    typeTime(val) {
      const d = new Date(val);
      const resDate =
        d.getFullYear() +
        "-" +
        this.p(d.getMonth() + 1) +
        "-" +
        this.p(d.getDate());
      return resDate;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  overflow: hidden;
  // background: url("../../assets/images/home/bj.png") 0 0;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;

  .form-container {
    // background: url("../../assets/images/home/cont_bj.png") 0 0;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    // margin: 0 3%;
    // padding: 0 6px;
    .enter_title {
      width: 100%;
      height: 10%;
    }
    .enter_big {
      width: 100%;
      height: 90%;
      overflow: auto;
      padding: 0 20px;
    }
    .form-main {
      width: 100%;
      height: 100%;
      // margin-top: 130px;
      color: #333333;
      .warn-content {
        margin-top: 10px;
        margin-bottom: 18px;
        line-height: 30px;
        font-size: 15px;
      }
      h2 {
        text-align: center;
        color: #fff;
        width: calc(100% + 40px);
        margin-left: -20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24);
        height: 60px;
        line-height: 60px;
        font-size: 24px;
      }
      h4 {
        margin-top: 15px;
      }
      .form-border {
        background-color: rgba(255, 255, 255, 0.9);
        color: #333333;
        padding: 5px;
        margin: 5px 0;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 3px;
      }
      .tizheng {
        div {
          width: 33.3333%;
          float: left;
          padding: 10px 5px;
          font-size: 15px;
          input {
            vertical-align: middle;
            width: 15px;
            height: 15px;
          }
        }
      }
      .form-twoBor {
        padding: 5px 0;
        div {
          width: 100%;
          padding: 5px 10px;
          input {
            vertical-align: middle;
            width: 20px;
            height: 20px;
          }
          label {
            font-size: 15px;
          }
        }
      }
    }
    .form-submit {
      width: 90%;
      margin-left: 5%;
      height: 50px;
      background: #228ed9;
      border-radius: 8px;
      color: white;
      font-size: 15px;
      border: none;
      outline: none;
    }
  }
  input {
    border: 1px solid #cccccc;
  }
  .yy-input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: red;
  }
}
</style>
